
<template>
    <el-header class="main-header">
        <ul class="nav-bar float-right h-full">
            <li class="nav-item">
                <el-badge :value="noticeCount" class="item" v-show="noticeCount>0">
                    <i class="el-icon-bell" @click="goToNotice" style="cursor: pointer"></i>
                </el-badge>
                <i class="el-icon-bell" @click="goToNotice" style="cursor: pointer" v-show="noticeCount<=0"></i>
            </li>
            <li class="nav-item">
                <el-dropdown>
                    <section class="nav-item--user">
                        <span class="name">qfy1111111111111111111111111111</span>
                        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" style="margin-top: 10px"></el-avatar>
                    </section>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>黄金糕</el-dropdown-item>
                        <el-dropdown-item>狮子头</el-dropdown-item>
                        <el-dropdown-item>螺蛳粉</el-dropdown-item>
                        <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                        <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </li>
        </ul>
    </el-header>
</template>
<script>
    export default {
        data() {
            return {
                showLogin: false,
                formLabelWidth: "80px",
                noticeCount: 0,
                importantNoticeCount: 0,
                form: {
                    username: '',
                    password: '',
                },
                rules: {
                    username: [
                        {required: true,message: '请输入用户名', trigger: 'blur'},
                    ],
                    password: [
                        {required: true,message: '请输入密码', trigger: 'blur'},
                    ]
                },
                user: {
                    username: sessionStorage.getItem("username")
                }
            }
        },
        created() {
            this.$http({
                url: '/notice/notices',
                method: 'get',
            }).then((data) => {
                for(let notice of data){
                    if(notice.isRead!='1'){
                        this.noticeCount++;
                        if(notice.isImportant!='1'){
                            this.importantNoticeCount++;
                        }
                    }
                }
            })
        },
        methods: {
            login: function () {
                this.$http.post("/shareCommunity/user/login.do",this.$qs.stringify(this.form)).then((response) => {
                    if(!response.data.errorinfo){
                        let userData = response.data.data;
                        this.user = userData;
                        this.showLogin = false;
                        this.$message({
                            message: '登录成功',
                            type: 'success'
                        });
                        sessionStorage.setItem("username",userData.username);
                        sessionStorage.setItem("userid",userData.userid);
                    }else {
                        this.$message.error(response.data.errorinfo);
                    }
                })
            },
            logout: function () {
                this.$http.post("/shareCommunity/user/logout.do").then((response) => {
                    if(!response.data.errorinfo){
                        this.$message({
                            message: '退出成功',
                            type: 'success'
                        });
                        sessionStorage.removeItem("username");
                        this.user.username = "";
                    }else {
                        this.$message.error(response.data.errorinfo);
                    }
                })
            },
            goToNotice() {
                let val = {};
                val.name = '通知';
                val.absPath = '/main/system/noticeManager';
                val.funIcon = 'el-icon-chat-dot-round';
                this.$global.addTab(val);
            }
        },
        mounted () {
            this.$bus.on('noLogin',(msg) => {
                this.showLogin = msg
            })
        },

    }
</script>
<style>
    .title {
        font-weight: 500;
        font-size: x-large;
        text-align: left;
        color: #8186d5;
        margin-left: 5px;
        line-height: 60px;
        vertical-align: middle;
    }
    .share-header {
        margin: 0 -20px;
        padding: 0px 20px;
        background-color: #f3f8ff;
        border-bottom: 1px solid #deecff;
        color: #00d1cd;
        text-align: left;
        cursor: pointer;
    }
    .header-img {
        display: inline-block;
        line-height: 60px;
        vertical-align: middle;
    }
    .username {
        color: #8186d5;
    }
    a:link {
        text-decoration: none;
        color: #8186d5;
    }
    a:visited {
        text-decoration: none;
        color: #8186d5;
    }
    .text-gradient {
        background-image: linear-gradient( 135deg, #2AFADF 10%, #4C83FF 100%);
        -webkit-background-clip:text;
        -webkit-text-fill-color:transparent;
    }
</style>
